<template>
  <view class="page">
    <!-- <mt-header title="会议室"></mt-header>
  <u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" title="会议室" leftIconColor="#FFF"
    @rightClick="rightClick" :autoBack="true">
  </u-navbar>
  -->
    <div class="time"  >
      <picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
        <span >{{date}}</span>
        <img   src="@/static/img/Frame.png" />
      </picker>
    </div>


    <div class="date">

      <div v-if="edifice" class="days">
        <div v-for="(v, i) in edifice.date" @click="setDay(v.day, v.week)" :key="i" class='newday'>
          <div @click="setDay(v.day, v.week)" class="week">
            <span v-html="v.weekName"></span>
          </div>
          <div @click="setDay(v.day, v.week)" class="day">
            <div v-html="v.day" :class="{ active: v.day == day }"></div>
          </div>

        </div>
      </div>
    </div>
    <div class="room">
      <div v-for="(v, i) in room" @click="jump(v.id)" class="roomList" :key="i">
        <div class='roomTitle'>
          <span class='small' :style="v.room_type ==1 ?'background: #fc5531;':''" >{{v.room_type=="1"?'临时':'固定'}}</span>
          {{v.title}}
          <p>{{v.floor}} {{v.number}}</p>
          <div class="makeapp">预约</div>
        </div>
      </div>
    </div>
    <!--日期选择-->
    <template>
      <mt-datetime-picker ref="picker" type="date" @confirm="selectDate" :start-date="new Date()">
      </mt-datetime-picker>
    </template>

    <myTabBar :list='tabList' :currentIndex="1"></myTabBar>
  </view>
</template>

<script>
import myTabBar from '../../../component/customTabBar/customTabBar.vue'
// #ifdef H5
import $ from "@/static/assets/js/jquery-1.11.1.min.js";
import {
  initMeeting
} from "./index";

import {
  getMeetTypesList,getRoomList,getRoomDetail,getEdifice
} from '@/api/roomApi.js'
export default {
  components:{
    myTabBar
  },
  data() {
    const currentDate = this.getDate({
      format: true
    })

    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return {
      tabList:[
        {title:"代办",url:"/pages/tabbar/tabbar-3/daiban",icon:"list-dot"},
        {title:"会议室",url:"/pages/tabbar/tabbar-3/huiyishi",icon:"home"},
        {title:"我的会议",url:"/pages/tabbar/tabbar-3/myhuiyi",icon:"account"}
      ],
      date: currentDate,
      time: '12:01',
      typeList: [],
      typeId: {},
      show: true,
      edificeActions: [],
      addressPopup: false,
      edifice: {},
      edifices: [],
      year: year,
      month: month,
      day: day,
      room: [],
      tabbared: "index",
      startDate: new Date(),
    }
  },
  methods: {
    open() {
      // console.log('open');
    },
    closePop() {
      this.show = false
      // console.log('close');
    },
    bindDateChange: function(e) {
      this.date = e.detail.value;
      var arr = this.date.split('-');
      this.year = arr[0]
      this.month =  arr[1]
      this.day =  arr[2]
      this.getEdifice();
    },
    bindTimeChange: function(e) {
      this.time = e.detail.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    toggleEdifice() {
      this.addressPopup = !this.addressPopup;
    },
    cancel() {
      this.addressPopup = false;
    },
    getEdifice() {
      const _this = this;
      let params = {};
      params.day  = this.day;
      params.date = this.date;
      params.month = this.month;
      params.year = this.year;
      this.startDate = new Date(this.year + "/" + this.month + "/" + this.day);


      getEdifice(params).then(res => {
        if ( res.code == 1) {
          _this.edifice = res.data[0];
          if (_this.room.length < 1) {
            _this.getRoom();
          }
          _this.edifices = res.data;
        }
      })


    },
    setEdifice(item) {
      this.edifice = item;
      this.cancel();
      this.getRoom();
    },
    setDay(day, week) {
      this.day = day;
      this.week = week;
    },
    getRoom() {
      const _this = this;
      _this.$indicator.open("加载中...");
      let params = {};
      params.edifice_id = this.edifice.id;
      params.day = this.day;
      params.month = this.month;
      params.year = this.year;
      params.date = this.date;

      getRoomList(params).then(res => {
        console.log(res)
        _this.room = res.data ;
        _this.$indicator.close();
      })
    },
    selType(item){
      this.typeId = item;
      uni.setStorageSync('type_id', item.id);
    },
    jump(id) {
      if (!id) return;
      const url =
          "/pages/tabbar/meeting-room/show/show?id=" +
          id +
          "&day=" +
          this.day +
          "&year=" +
          this.year +
          "&month=" +
          this.month+
		  "&meet_type="+1;
      uni.navigateTo({
        url,
      });
    },
    openPicker() {
      this.$refs.picker.open();
    },
    selectDate(date) {
      this.month = date.getMonth() + 1;
      this.day = date.getDate();
      this.getEdifice();
    },
    readInitDateTime() {
      let dateTime = new Date();
      let currYear = dateTime.getFullYear();
      let opt = {};
      opt.datetime = {
        preset: "date",
      };
      opt.default = {
        theme: "android-ics light", //皮肤样式
        display: "modal", //显示方式 ：modal（正中央）  bottom（底部）
        mode: "scroller", //日期选择模式
        dateFormat: "yyyy-mm-dd", // 日期格式
        lang: "zh",
        startYear: currYear - 5, //开始年份currYear-5不起作用的原因是加了minDate: new Date()
        endYear: currYear + 5, //结束年份
        minDate: new Date(), //加上这句话会导致startYear:currYear-5失效，去掉就可以激活startYear:currYear-5,
        // maxDate: new Date(dateTime.setDate(dateTime.getDate()+7)),
        onSelect: function(value) {
          let date = new Date(value.split(" ")[0].replace(/\-/g, "/"));
          vm.year = date.getFullYear();
          vm.month = date.getMonth() + 1;
          vm.day = date.getDate();
          let difValue = Math.ceil(
              (date - vm.startDate) / (1000 * 60 * 60 * 24)
          );
          if (difValue > 6) {
            vm.getEdifice();
          } else {
            vm.getRoom();
          }
        },
      };
      const optDateTime = $.extend(opt["datetime"], opt["default"]);

      $("#appDateTime1").mobiscroll(optDateTime).datetime(optDateTime);
    },
  },
  onLoad() {

    initMeeting($);
    this.readInitDateTime();
  },
  onReady() {
    this.getEdifice();

  },
  watch: {
    day() {
      this.getRoom();
    },
  },
};

// #endif
</script>

<style>
@import "@/static/assets/css/index.css";
@import "@/static/assets/css/mobiscroll.core-2.5.2.css";
@import "@/static/assets/css/mobiscroll.animation-2.5.2.css";
@import "@/static/assets/css/mobiscroll.android-ics-2.5.2.css";
</style>
